<template>
	<view class="content">
		<view class="box">
			<view class="show">
				<text id="history">{{ showFormula }}</text>
			</view>
			<view class="show">
				<view id="val">{{ val }}</view>
			</view>
			<view>
				<view class="keyboard" id="keyboard">
					<text v-for="(item, index) in keyboards" :key="item.value" :class="item.class" @click="handleKeyClick(item.value, item)">{{ item.text }}</text>
				</view>    
			</view>
		</view>
	</view>
</template>

<script setup>
	import {create, all} from 'mathjs'
	import keyboardArr from '../../static/keyboard.js'
	import { ref, reactive, computed } from 'vue'
	import { onShow, onHide, onLoad } from '@dcloudio/uni-app'
	const math = create(all, {})
	const val = ref('0')
	// 存储公式的数组
	const formulaArr = ref([])
	const showFormula = computed(() => {
		const hash = {
			'/': '÷',
			'*': '×'
		}
		return formulaArr.value.map(item => {
			return hash[item] ? hash[item] : item
		}).join('')
	})
	const keyboards = reactive(keyboardArr)
	const keyHandleHash = {
		'C': function() {
			clearResult()
			clearFormula()
		},
		'=': () => {
			const formula = formulaArr.value.join('')
			if(!formula) {
				setResult('错误')
				return
			}
			try {
				const value = eval(formula)
				val.value = math.format(value, 14)
				return value
			} catch {
				setResult('错误')
			}
		},
		'Del': () => {
			const length = formulaArr.value.length
			if(!length) return
			const item = formulaArr.value[length - 1]
			formulaArr.value[length - 1] = item.substr(0, item.length - 1)
			if(!formulaArr.value[length - 1]) formulaArr.value.splice(length - 1, 1)
		}
	}
	function handleKeyClick(val, item) {
		if(keyHandleHash[val]) {
			keyHandleHash[val]()
			return
		}
		// 若是操作符
		setFormula(item)
	}
	// 清空结果
	function clearResult() {
		val.value = 0
	}
	// 清空公式
	function clearFormula() {
		formulaArr.value = []
	}
	// 设置结果
	function setResult(value) {
		val.value = value
	}
	// 设置公式
	function setFormula(obj) {
		const val  = obj.value
		const length = formulaArr.value.length
		const last = formulaArr.value[length - 1]
		const formulaReg = new RegExp(/[\+\-\*/\%]/)
		// 若第一位不为数字
		if(formulaReg.test(val) && !length) return
		// 上一位若为符号则push
		if((/\./.test(last) && val === '.') || (last && formulaReg.test(last) && formulaReg.test(val))) {
			if(last !== val && val !== '.') {
				formulaArr.value.splice(length - 1, 1)
			} else {
				return
			}
		}
		if(length && /\d|\./.test(val) && /\d|\./.test(last)) {
			formulaArr.value[length - 1] += val
		} else {
			formulaArr.value.push(val)
		}
	}
</script>

<style lang="less" scoped>
	body {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000;
	}
	.content {
		box-sizing: border-box;
		width: 750rpx;
		height: 1334rpx;
		overflow: hidden; 
		background-color: #000;
		color: #fff;
		display: flex;
		align-items: flex-end;
		padding: 24rpx 36rpx;
		box-shadow: 0 0 10rpx #ccc;
	}
	.box {
		width: 100%;
	}
	.show {
		color: #fff;
		text-align: right;
		padding-right: 12rpx;
	}
	.keyboard {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.keyboard text {
		width: 140rpx;
		height: 140rpx;
		line-height: 140rpx;
		display: inline-block;
		user-select: none;
		cursor: pointer;
		text-align: center;
		background-color: #272727;
		margin-right: 30rpx;
		margin-bottom: 24rpx;
		border-radius: 50%;
		font-size: 56rpx;
		font-weight: 600;
		color: #fff;
		box-shadow: inset 0 0 0 #000;
		cursor: pointer;
		transition: .25s;
		&:active {
			transform: scale(0.9);
			box-shadow: inset 0 0 10px #2e2e2e;
		}
	}
	.keyboard .a1 {
		background-color: #a1a1a1;
		color: #000;
	}
	.keyboard .g {
		background-color: rgb(255, 196, 0);
		margin-right: 0;
	}
	.keyboard .zero {
		flex: 1;
		text-align: left;
		border-radius: 200rpx;
		padding-left: 40rpx;
	}
	#val {
		font-size: 64rpx;
		margin-bottom: 12rpx;
	}
	#history {
		font-size: 64rpx;
		color: #ccc;
	}
</style>
